<template>
	<div class="levelJs w944">
		<alert ref="alert"></alert>
		<deleteAlert ref="deleteAlert"></deleteAlert>
		<div class="label_top">
			<button @click="reBack"><i><&nbsp;</i>返回</button>
			<p>讲师等级</p>
		</div>
		<div class="label_table">
		   <div class="el-tabs-report" style="height: auto;"> 
				<div style="margin-bottom: 10px">
					<span>是否开启讲师等级：</span>
					<el-switch class="switchStyle" v-model="teacherIsOpen" active-color="#44cef6" inactive-color="#999" active-text="开启" inactive-text="关闭" :active-value="1" :inactive-value="0" @change="changeLevelStatus"></el-switch>
				</div>
				<a class="listOne" @click="createLevel" v-if="teacherIsOpen==1">新增等级</a>
		   	</div>
			<el-table ref="multipleTable" :data="tableData" border v-if="teacherIsOpen==1">
				<el-table-column label="编号" width="60">
					<template slot-scope="scope">{{ scope.row.sort}}</template>
				</el-table-column>
				<el-table-column prop="name" label="讲师等级"></el-table-column>
				<el-table-column prop="img" label="图标" width="120">
					<template slot-scope="scope">
						<img :src="scope.row.img" width="20"/>
					</template>
				</el-table-column>
				<el-table-column label="状态" width="159">
					<template slot-scope="scope">
						<el-switch class="switchStyle" v-model="scope.row.status" active-color="#44cef6" inactive-color="#999" active-text="开启" inactive-text="关闭" :active-value="1" :inactive-value="2" @change="changeSwitch(scope.row)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="250">
					<template slot-scope="scope">
						<el-button @click="handleEdit(scope.row)">编辑</el-button>
						<el-button @click="handleDelete(scope.row)" class="red">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		
		<!--弹窗设置-->
		<div class="levelWrap" v-show="levelStatus">
			<p>{{levelText}}</p>
			<div class="levelLine">
				<span>等级名称：</span>
				<input type="text" placeholder="请输入等级名称..." v-model="levelName"/>
			</div>
			<div class="levelLine" style="height: 120px;">
				<span>等级图标：</span>
				<div class="updownvideo">
					<el-upload class="avatar-uploader" refs="uploadxls" 
					action="http://www.h3clearning.com/huathree-back/uploadFile" 
					:headers="myHeaders"
					:show-file-list="false" 
					:before-upload="beforeAvatarUpload" 
					:on-success="handleAvatarSuccess">
						<img v-if="levelIconUrl" :src="levelIconUrl" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"><b style="display:block;font-weight:normal"><em>上传图片</em></b></i>
					</el-upload>
				</div>
			</div>
			<div class="levelLine">
				<a @click="wrapSubmit" class="buttonLeft">保存</a>
				<a @click="wrapCancel" class="buttonRight">取消</a>
			</div>
		</div>
	</div>
</template>
<script>
	import alert from '../../components/Alert.vue';
	import deleteAlert from '../../components/deleteAlert.vue';
	export default {
		data() {
			return {
				sort:'',
				teacherIsOpen:0,
				levelJs:'',
				nowType:'add',
				id:'',
				levelStatus:false,
				levelText:'新增等级',
				levelName:'',
				levelCount:'',
				levelIconUrl:'',
				tableData:[],
				myHeaders:{Authorization:this.$root.userInfoMsg.sessionId}
			}
		},
		methods: {
			getTableList(){
				this.$ajax({
					url: this.$root.jifuUrl + "/getGradeRulePage?"+'rootcompanyid=1'+'&type=2',
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data;
							for(var i = 0;i<this.tableData.length;i++){
								this.tableData[i].sort=i+1
							}
						}
					}
				});
			},
			createLevel(){
				this.levelStatus=true
			},
			addLevel(){
				var s = {
					name:this.levelName,
					credit:0,
					type:2,//1为学员
					img:this.levelIconUrl,
					rootcompanyid:1
				};
				this.$ajax({
					url: this.$root.jifuUrl + "/addGradeRule",
					method: 'POST',
					data: this.qs.stringify(s),
					success: res => {
						if(res.data.code == 200) {
							this.levelStatus=false;
							this.$rootFunction().addResSuccess();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			editLevel(){
				var s = {
					id:this.id,
					rootcompanyid:1,
					name:this.levelName,
					credit:0,
					type:2,//1为学员
					img:this.levelIconUrl
				};
				this.$ajax({
					url: this.$root.jifuUrl + "/updateGradeRuleById",
					method: 'POST',
					data: this.qs.stringify(s),
					success: res => {
						if(res.data.code == 200) {
							this.levelStatus=false;
							this.$rootFunction().addResSuccess();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			wrapSubmit(){
				if(this.nowType == 'add') {
					this.addLevel();
				}else if (this.nowType == 'edit') {
					this.editLevel();
				}
			},
			wrapCancel(){
				this.levelStatus=false;
				this.levelName='';
				this.levelIconUrl='';
			},
			changeLevelStatus(){
				if(this.teacherIsOpen==1){
					let s = {rootcompanyid:1,isOpen:1};
					this.$ajax({
						url: this.$root.jifuUrl + "/openCloseGradeRule",
						method: 'POST',
						data: this.qs.stringify(s),		
						success: res => {
							console.log('开启：',res);
							if(res.data.code == 200) {
								
							}
						}
					});
				}else if(this.teacherIsOpen==0){
					let s = {rootcompanyid:1,isOpen:0};
					this.$ajax({
						url: this.$root.jifuUrl + "/openCloseGradeRule",
						method: 'POST',
						data: this.qs.stringify(s),
						success: res => {
							console.log('关闭：',res);
							if(res.data.code == 200) {
								
							}
						}
					});
				}
			},
			changeSwitch(row){
				//switch 开启关闭
				if(row.status == 1){
					var s={id:row.id,status:1};
					this.$ajax({ 
						url: this.$root.jifuUrl + "/updateGradeRuleStatusById",
						method: 'POST',
						data: this.qs.stringify(s),
						success: res => {
							if(res.data.code == 200) {
								console.log('当前用户状态为',row.status);
							}
						}
					});
				}else if(row.status == 2){
					var s={id:row.id,status:2};
					this.$ajax({ 
						url: this.$root.jifuUrl + "/updateGradeRuleStatusById",
						method: 'POST',
						data: this.qs.stringify(s),
						success: res => {
							if(res.data.code == 200) {
								console.log('当前用户状态为',row.status);
							}
						}
					});
				}
			},
			handleEdit(row) {
				this.$ajax({
					url: this.$root.jifuUrl + "/getGradeRuleById?" +'id='+row.id,
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							this.nowType='edit';
							this.levelStatus=true;
							this.rootcompanyid=res.data.data.rootcompanyid;
							this.levelName=res.data.data.name;
							this.levelCount=res.data.data.credit;
							this.levelIconUrl=res.data.data.img;
							this.id=res.data.data.id;
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			handleDelete(row){
				this.transitionRow = row;
				this.$rootFunction().rootDelete();
			},
			deleteSubmit() {
				var s = {id:this.transitionRow.id};
				this.$ajax({
					url: this.$root.jifuUrl + "/deleteGradeRuleById",
					method: 'POST',
					data: this.qs.stringify(s),
					success: res => {
						if(res.data.code == 200) {
							this.$rootFunction().deleteResSuccess();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			reBack(){
				this.$router.go(-1);
			},
			handleAvatarSuccess(res, file) {
				if(res.code == 200) {
					this.levelIconUrl = res.data[0];
				};
			},
			beforeAvatarUpload(file) {
				const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png');
				const isLt2M = file.size / 1024 / 1024 < 2;
				if(!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			}
		},
		components: {
			alert,
			deleteAlert
		},
		mounted: function() {
			this.getTableList();
			this.$rootFunction().getTeacherLevelStatus();
			this.levelJs = this.$root.huasan.levelJs;
		}
	}
</script>

<style>
	.levelJs .el-table__row .switchStyle span.el-switch__label--left {left:7px;}
	.levelJs .el-table__row .switchStyle span.el-switch__label--right {left:-17px;} 
	.levelJs .levelWrap{width: 400px;height: 300px;position: fixed;top: 50%;left: 50%;margin-top: -150px;margin-left: -200px;z-index: 999;background: #fff;border: 1px solid #ccc;}
	.levelJs .levelWrap p{font-size: 16px;color: #44cef6;margin: 20px 0 0 30px;}
	.levelJs .levelWrap .levelLine{margin-left: 30px;overflow: hidden;margin-top: 14px;position: relative;}
	.levelJs .levelWrap .levelLine:nth-child(5){height: 100px;}
	.levelJs .levelWrap .levelLine span{font-size: 15px;color: #333;width:80px;display: inline-block;text-align: right;}
	.levelJs .levelWrap .levelLine input{width: 180px;height: 31px;line-height: 31px;border: 1px solid #ccc;font-size: 14px;color:#333;border-radius: 5px;padding-left: 15px;outline: none;box-sizing: border-box;}
	.levelJs .levelWrap .levelLine .updownvideo{position: absolute;top: 0;left: 86px;}
	.levelJs .levelWrap .levelLine .updownvideo,.levelJs .levelWrap .levelLine .updownvideo .avatar-uploader{width: 100px;height: 100px;line-height: 100px;display: inline-block;background: #f2f2f2;border: 0;}
	.levelJs .levelWrap .levelLine .updownvideo .el-upload{width: 100%;height: 100px;}
	.levelJs .levelWrap .levelLine .updownvideo .el-upload .avatar{width: 100%;height: 100px;}
	.levelJs .levelWrap .levelLine .updownvideo  i {padding-top: 26px;font-size: 18px;color: #666;}
	.levelJs .levelWrap .levelLine .updownvideo em{font-style: normal;font-size: 14px;color: #ccc;margin-top: 8px;display: block;line-height: 16px;}
	.levelJs .levelWrap .levelLine a{background: #44CEF6;height: 33px;line-height: 33px;width: 100px;display: inline-block;color:#fff;text-align: center;border-radius: 5px;cursor: pointer;font-size: 14px;}
	.levelJs .levelWrap .levelLine a.buttonLeft{margin: 0 60px 0 34px;}
    .levelJs .levelWrap .levelLine a.buttonRight{background: #ccc;}
</style>